<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="打印表格(函数).js" type="text/javascript"></script>

</head>
<body>
<!--
			增加节点：
				appendChild(node) :
				语法： 父节点.appendChild(node)
				insertBefore(newnode, refnode)

					语法： 父节点.insertBefore(新节点, 在具体的节点前插入)
			注意事项： 增加新节点之前应该创建新节点
			创建节点：
				createElement() : 创建元素节点
					语法： document.createElement("元素名称")
				createAttribute() : 创建属性节点
				createTextNode() : 创建文本节点
		-->
    <ul id="parent">
        <li id="first">列表一</li>
        <li id="second">列表二</li>
        <li id="third">列表三</li>
        <li id="fifth">列表三</li>
    </ul>
    <script type="text/javascript">
        // 要求：在父节点中新增子节点
        // 第一步：创建子节点：
        //     1.1创建元素节点
        var liobj = document.createElement("li");
        //     1.2创建属性节点
        liobj.className = "wmf healthy"
        //     1.3创建文本节点
        liobj.innerHTML = "<p>这是新增的</p>"
        // 第二步：把新节点添加到父节点中
        //     2.1获取父节点
        var parent = document.getElementById("parent");
        //     2.2 追加新节点
        parent.appendChild(liobj);
        // log(parent);

        // 要求：在second之前新增子节点
        // 第一步：创建子节点：
        //     1.1创建元素节点
        var liobj2 = document.createElement("li");
        //     1.2创建属性节点
        liobj2.className = "wmf is healthy"
        //     1.3创建文本节点
        liobj2.innerHTML = "在second节点之前插入"
        // 第二步：要找到在哪个节点之前添加
        var second = document.getElementById("second");
        // 第三步：具体添加
        //     3.1获取父节点
        var parent = document.getElementById("parent");
        //     3.2 追加新节点(也是父元素调用的)
        parent.insertBefore(liobj2,second);
        log(parent);

    </script>

</body>
</html>